<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计页</title>
    <link rel="stylesheet" href="../../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../../assets/icons/iconfont.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/statistical.css">
</head>
<body class="iframe">
<div class="row-box">
    <div class="layui-row layui-col-space20 x-m-top">
        <div class="layui-col-md6">
            <!-- 指令下发统计 pie-->
            <div class="layui-card">
                <div class="layui-card-header">指令下发统计</div>
                <div class="layui-card-body">
                    <div class="chart-option layui-form">
                        <dl>
                            <dt>分类：</dt>
                            <dd>
                                <select name="interest" lay-filter="classify1">
                                    <option value=""></option>
                                    <option value="0">按案件类型统计</option>
                                    <option value="1" selected="">按法案</option>
                                    <option value="2">按单位</option>
                                </select>
                            </dd>
                            <dt>时间段：</dt>
                            <dd>
                                <input type="text" class="layui-input" id="date1" placeholder=" - "
                            </dd>
                        </dl>
                    </div>
                    <div id="pieBox" class="x-pie-box"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <!-- 指令下发统计 line-->
            <div class="layui-card">
                <div class="layui-card-header">指令下发统计</div>
                <div class="layui-card-body">
                    <div class="chart-option layui-form">
                        <dl>
                            <dt>分类：</dt>
                            <dd>
                                <select name="interest" lay-filter="classify2">
                                    <option value=""></option>
                                    <option value="0">按案件类型统计</option>
                                    <option value="1" selected="">按法案</option>
                                    <option value="2">按单位</option>
                                </select>
                            </dd>
                            <dt>时间段：</dt>
                            <dd>
                                <input type="text" class="layui-input" id="date2" placeholder=" - "
                            </dd>
                        </dl>
                    </div>
                    <div id="lineBox" class="x-line-box"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md12">
            <!-- 指令下发统计 bar-->
            <div class="layui-card">
                <div class="layui-card-header">指令下发统计</div>
                <div class="layui-card-body">
                    <div class="chart-option layui-form">
                        <dl>
                            <dt>分类：</dt>
                            <dd>
                                <select name="interest" lay-filter="classify3">
                                    <option value=""></option>
                                    <option value="0">按案件类型统计</option>
                                    <option value="1" selected="">按法案</option>
                                    <option value="2">按单位</option>
                                </select>
                            </dd>
                            <dt>时间段：</dt>
                            <dd>
                                <input type="text" class="layui-input" id="date3" placeholder=" - "
                            </dd>
                        </dl>
                    </div>
                    <div id="barBox" class="x-bar-box"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../../lib/layui/layui.all.js"></script>
<script src="../../../lib/jquery-1.9.1.min.js"></script>
<script src="../../../lib/echarts/echarts.js"></script>
<script>
    (function () {
        // 饼图数据模拟
        var pieData = [
            {value: 150, name: '情报', itemStyle: {color: '#E5CF0D'}},
            {value: 250, name: '出入境', itemStyle: {color: '#2EC7C9'}},
            {value: 100, name: '治安', itemStyle: {color: '#97B552'}},
            {value: 200, name: '网安', itemStyle: {color: '#0099CC'}},
            {value: 400, name: '技侦', itemStyle: {color: '#D87A80'}},
            {value: 400, name: '刑侦', itemStyle: {color: '#B6A2DE'}}
        ]
        // 折线数据模拟
        /*var lineData = [
            {
                name: '2017年',
                data: [
                    ['1月', 230],
                    ['3月', 160],
                    ['5月', 120],
                    ['7月', 300],
                    ['9月', 85],
                    ['11月', 120],
                ]

            },
            {
                name: '2018年',
                data: [
                    ['1月', 270],
                    ['3月', 100],
                    ['5月', 320],
                    ['7月', 400],
                    ['9月', 125],
                    ['11月', 220],
                ]

            }
        ]*/
        var testData = [
            [
                {'tbsk': '2018-2', 'count': 10},
                {'tbsk': '2018-3', 'count': 20},
                {'tbsk': '2018-4', 'count': 103},
                {'tbsk': '2018-5', 'count': 20},
            ],
            [
                {'tbsk': '2017-2', 'count': 100},
                {'tbsk': '2017-3', 'count': 200},
                {'tbsk': '2017-4', 'count': 1030},
                {'tbsk': '2017-5', 'count': 200},
            ]
        ]
        var convertLineData = function (d) {
            var _result = []
            for (var i = 0; i < d.length; i++) {
                var _currD = d[i]
                var _cResultObje = {}
                for (var ii = 0; ii < _currD.length; ii++) {
                    var _currDitem = _currD[ii]
                    if (ii === 0) {
                        _cResultObje.name = _currDitem.tbsk.split('-')[0]
                        _cResultObje.data = []
                    }
                    _cResultObje.data.push([_currDitem.tbsk.split('-')[1], _currDitem.count])
                }
                _result.push(_cResultObje)
            }
            return _result
        }
        var lineData = convertLineData(testData)
        // 柱状图数据模拟
        var barData = [
            {
                name: '类别',
                value: 100
            },
            {
                name: '类别',
                value: 152
            },
            {
                name: '类别',
                value: 200
            },
            {
                name: '类别',
                value: 334
            },
            {
                name: '类别',
                value: 550
            },
            {
                name: '类别',
                value: 330
            },
            {
                name: '类别',
                value: 334
            },
            {
                name: '类别',
                value: 550
            },
            {
                name: '类别',
                value: 330
            },
            {
                name: '类别',
                value: 334
            },
            {
                name: '类别',
                value: 550
            },
            {
                name: '类别',
                value: 330
            },
            {
                name: '类别',
                value: 334
            },
            {
                name: '类别',
                value: 550
            },
            {
                name: '类别',
                value: 330
            },
            {
                name: '类别',
                value: 334
            },
            {
                name: '类别',
                value: 550
            },
            {
                name: '类别',
                value: 330
            },
            {
                name: '类别',
                value: 334
            },
            {
                name: '类别',
                value: 550
            },
            {
                name: '类别',
                value: 330
            },
            {
                name: '类别',
                value: 220
            }, {
                name: '类别',
                value: 200
            },
            {
                name: '类别',
                value: 334
            },
            {
                name: '类别',
                value: 550
            },
            {
                name: '类别',
                value: 100
            },
            {
                name: '类别',
                value: 100
            },
            {
                name: '类别',
                value: 100
            },
            {
                name: '类别',
                value: 200
            },
            {
                name: '类别',
                value: 334
            },
            {
                name: '类别',
                value: 550
            },
        ]

// =========================================================

        // 图表实例对象缓存
        var echartsCache = {
            pieChart: null,
            lineChart: null,
            barChart: null
        }
        var laydate = layui.laydate
            , form = layui.form;

        var _fn = {
            init: function () {
                this.drawPie()
                this.drawLine()
                this.drawBar()
                this.render()
            },
            /**
             * 初始化表单操作监控
             * 时间文档：http://www.layui.com/doc/modules/laydate.html
             */
            render: function () {
                for (var i = 1; i < 4; i++) {
                    form.on('select(classify' + i + ')', function (data) {
                        _fn.onSelect($(data.elem).attr('lay-filter'), data)
                    });
                    laydate.render({
                        elem: '#date' + i
                        , range: true
                        , format: 'yyyy/MM/dd'
                        , done: function (value, date, endDate) {
                            _fn.onSwitchDate($(this.elem[0]).attr('id'), value, date, endDate)
                        }
                    });
                }
            },
            // 画饼图
            drawPie: function (type) {
                var _legendData = []  // 图例数据
                var _count = 0 // 总数和
                for (var i = 0; i < pieData.length; i++) {
                    _legendData.push(pieData[i].name)
                    _count += (pieData[i].value || 0)
                }

                if (type !== 'update') {
                    if (echartsCache.pieChart) {
                        echartsCache.pieChart.dispose()
                    }
                    echartsCache.pieChart = echarts.init(document.getElementById('pieBox'))
                }
                echartsCache.pieChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b}({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        bottom: 5,
                        itemWidth: 16,
                        itemHeight: 16,
                        data: _legendData
                    },
                    grid: {
                        show: false,
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0
                    },
                    series: [
                        {
                            name: '总数',
                            type: 'pie',
                            selectedMode: false,
                            legendHoverLink: false,
                            hoverAnimation: false,
                            center: ['50%', '60%'],
                            radius: [0, '42%'],
                            silent: true,
                            label: {
                                show: true,
                                position: 'center',
                                fontFamily: 'Microsoft YaHei',
                                color: '#8A8A8A',
                                fontSize: 18,
                                formatter: `{b}:{ct|{c}}条`,
                                rich: {
                                    ct: {
                                        color: '#8A8A8A',
                                        fontSize: 20
                                    }
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: _count, name: '总数', itemStyle: {color: '#E3F6FF'}},
                            ]
                        },
                        {
                            type: 'pie',
                            center: ['50%', '60%'],
                            radius: ['50%', '75%'],
                            label: {
                                show: true,
                                formatter: '\n{hr|}\n{b}({c})',
                                rich: {
                                    hr: {
                                        width: '100%',
                                        height: 1,
                                        backgroundColor: 'auto',
                                        shadowBlur: 2,
                                        shadowOffsetX: 2,
                                        padding: [0, 10]
                                    }
                                }
                            },
                            labelLine: {
                                show: true,
                                length: 10,
                                length2: 20
                            },
                            tooltip: {
                                backgroundColor: 'rgba(0,0,0,0.45)',
                                textStyle: {
                                    color: '#ffffff',
                                    fontFamily: 'Microsoft YaHei'
                                },
                                formatter: function (p) {
                                    var str = p.data.name
                                    if (p.data.value) {
                                        str = p.data.name + '（' + p.data.value + '）'
                                    }
                                    return str
                                }
                            },
                            data: pieData
                        }
                    ]

                });
            },
            // 画折线图
            drawLine: function (type) {
                if (type !== 'update') {
                    if (echartsCache.lineChart) {
                        echartsCache.lineChart.dispose()
                    }
                    echartsCache.lineChart = echarts.init(document.getElementById('lineBox'))
                }
                var _xAxisData = [],
                    _legendData = []
                for (var i = 0; i < lineData.length; i++) {
                    _legendData.push(lineData[i].name)
                    var _currentList = lineData[i].data
                    for (var ii = 0; ii < _currentList.length; ii++) {
                        if ($.inArray(_currentList[ii][0], _xAxisData) < 0) {
                            _xAxisData.push(_currentList[ii][0])
                        }
                    }
                }
                var lineOption = {
                    legend: {
                        data: _legendData,
                        right: '10px'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: _xAxisData,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#D7D7D7'
                            }
                        },
                        axisLabel: {
                            color: '#666666'
                        }

                    },
                    yAxis: {
                        type: 'value',
                        splitNumber: 6,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#D7D7D7'
                            }
                        },
                        axisLabel: {
                            color: '#666666'
                        }
                    },
                    grid: {
                        top: '40px',
                        left: '10px',
                        right: '10px',
                        bottom: '3%',
                        containLabel: true
                    },
                    series: [
                        {
                            data: [],
                            type: 'line',
                            symbol: 'triangle',
                            symbolSize: 20,
                            lineStyle: {
                                width: 4,
                            },
                            itemStyle: {
                                color: '#FFB35B'
                            }
                        },
                        {
                            data: [],
                            type: 'line',
                            symbol: 'circle',
                            symbolSize: 16,
                            lineStyle: {
                                width: 4,
                            },
                            itemStyle: {
                                color: '#1FA8CF'
                            }
                        }
                    ]
                }
                lineOption.series[0].name = lineData[0].name
                lineOption.series[0].data = lineData[0].data
                lineOption.series[1].name = lineData[1].name
                lineOption.series[1].data = lineData[1].data
                echartsCache.lineChart.setOption(lineOption)
            },
            // 画柱状图
            drawBar: function (type) {

                var _XAxisData = []
                for (var i = 0; i < barData.length; i++) {
                    _XAxisData.push(barData[i].name)
                }
                if (type !== 'update') {
                    if (echartsCache.barChart) {
                        echartsCache.barChart.dispose()
                    }
                    echartsCache.barChart = echarts.init(document.getElementById('barBox'))
                }
                echartsCache.barChart.setOption({
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        show: true,
                        formatter: function (params) {
                            var tar = params[0];
                            return tar.name + '(' + tar.value + ')';
                        }
                    },
                    grid: {
                        top: '40px',
                        left: '10px',
                        right: '10px',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: _XAxisData,
                            axisTick: {
                                show: false,
                                alignWithLabel: true
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#D7D7D7'
                                }
                            },
                            axisLabel: {
                                color: '#666666'
                            }
                        }
                    ],
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#D7D7D7'
                            }
                        },
                        axisTick: {
                            show: false,
                            alignWithLabel: true
                        },
                        axisLabel: {
                            color: '#666666'
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            barWidth: '50%',
                            data: barData,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#00CCCC'},
                                            {offset: 1, color: '#FFFF99'}
                                        ]
                                    )
                                }
                            }
                        }
                    ]
                });
            },
            /**
             * 图表分类下拉选择操作方法
             * @param layFilter 当前操作 layFilter 值，用来区分作用在哪个图表
             * @param data 操作响应的数据
             */
            onSelect: function (layFilter, data) {
                if (layFilter === 'classify1') {
                    // 饼图
                    // …… 参考 _fn.onSwitchDate()
                    // 重新渲染图表
                    _fn.drawPie('update')
                } else if (layFilter === 'classify2') {
                    // 折线图
                    // …… 参考 _fn.onSwitchDate()
                    // 重新渲染图表
                    _fn.drawLine('update')
                } else if (layFilter === 'classify3') {
                    //柱状图
                    // …… 参考 _fn.onSwitchDate()
                    // 重新渲染图表
                    _fn.drawBar('update')
                }
            },
            /**
             * 图表时间段选择操作方法
             * @param id 当前操作date 元素ID, 用来区分左元在哪个图表
             * @param value 得到日期生成的值，如：2017-08-18
             * @param date 得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
             * @param endDate 得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
             */
            onSwitchDate: function (id, value, date, endDate) {
                if (id === 'date1') {
                    // 饼图
                    // 模拟获取新的数据，对接替换为正式
                    var _t = date.date * 3
                    pieData = [
                        {value: (15 + _t), name: '情报', itemStyle: {color: '#E5CF0D'}},
                        {value: (25 + _t), name: '出入境', itemStyle: {color: '#2EC7C9'}},
                        {value: (10 + _t), name: '治安', itemStyle: {color: '#97B552'}},
                        {value: (20 + _t), name: '网安', itemStyle: {color: '#0099CC'}},
                        {value: (40 + _t), name: '技侦', itemStyle: {color: '#D87A80'}},
                        {value: (40 + _t), name: '刑侦', itemStyle: {color: '#B6A2DE'}}
                    ]
                    // 重新渲染图表
                    _fn.drawPie('update')
                } else if (id === 'date2') {
                    // 折线图
                    // 模拟获取新的数据，对接替换为正式
                    var _t = date.date * 3
                    lineData = [
                        {
                            name: date.year + '年',
                            data: [
                                ['1月', 230 + _t],
                                ['3月', 160 + _t],
                                ['5月', 120],
                                ['7月', 300 + _t],
                                ['9月', 85],
                                ['11月', 120 + _t],
                            ]

                        },
                        {
                            name: endDate.year + '年',
                            data: [
                                ['1月', 270 + _t],
                                ['3月', 100],
                                ['5月', 320 + _t],
                                ['7月', 400 + _t],
                                ['9月', 125],
                                ['11月', 220 + _t],
                            ]

                        }
                    ]
                    _fn.drawLine('update')
                } else if (id === 'date3') {
                    // 柱状图
                    barData = [
                        {
                            name: '类别',
                            value: 100
                        },
                        {
                            name: '类别',
                            value: 152
                        },
                        {
                            name: '类别',
                            value: 200
                        },
                        {
                            name: '类别',
                            value: 334
                        },
                        {
                            name: '类别',
                            value: 550
                        },
                        {
                            name: '类别',
                            value: 330
                        },
                        {
                            name: '类别',
                            value: 334
                        },
                        {
                            name: '类别',
                            value: 550
                        },
                        {
                            name: '类别',
                            value: 330
                        },
                        {
                            name: '类别',
                            value: 334
                        }
                    ]
                    _fn.drawBar('update')
                }
            }
        }
        // 初始化
        _fn.init()
        window.addEventListener('resize', function () {
            _fn.init()
        })
    })();
</script>
</body>
</html>